@charset "utf-8";
@import "reset";

body {
    .web {
        header {
            position: fixed;
            top:0;
            left:0;
            padding: 1.3333vw 2.4vw 1.8667vw;
            width: 100vw;
            height: 12.5333vw;
            border-bottom: .2667vw solid rgba(159, 153, 153,0.3);
            background-color: #fff;
            box-sizing: border-box;
            input {
                padding-left: 11.2vw;
                width: 100%;
                height: 100%;
                font-size: 3.7333vw;
                outline: none;
                border: none;
                box-sizing: border-box;
                background-color: #F3F5F7;
            }
        }

        main {
            overflow: hidden;
            &::before {
                content:"";
                display: block;
                height: 12.5333vw;
            }
            .container {
                border-top: .2667vw solid rgba(159, 153, 153,0.3);
                display: flex;
                height: 152.5333vw;
                aside {
                    width: 21.3333vw;
                    border-right: .2667vw solid rgba(159, 153, 153,0.3);
                    ul {
                        // border: 1px solid red;
                        li {
                            text-align: center;
                            height: 10.6667vw;
                            margin: 4vw 0;
                            font-size: 3.7333vw;
                            line-height: 10.6667vw;
                            box-sizing: border-box;
                            &.active {
                                color:#884E22;
                                border-left: .5333vw solid #884E22;
                            }
                        }
                    }
                }
                section {
                    // border: 1px solid red;
                    box-sizing: border-box;
                    // flex-grow: 1;
                    padding: 2.4vw 3.4667vw 0 2.6667vw;
                    width: 78.6667vw;
                    .header {
                        width: 72.5333vw;
                        height: 37.0667vw;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .sort-content {
                        border: .2667vw solid rgba(159, 153, 153,0.3);
                        margin-top: 4vw;
                        h3 {
                            height: 9.3333vw;
                            font-size: 4.2667vw;
                            font-weight: 600;
                            color: #555;
                            text-indent: .5333vw;
                            line-height: 9.3333vw;
                        }
                        .sort-list {
                            margin-left: .5333vw;
                            // border: .2667vw solid red;
                            display: flex;
                            flex-wrap: wrap;
                            justify-content: space-around;
                            li {
                                margin: 2.6667vw 0;
                                width: 28.2667vw;
                                height: 5.3333vw;
                                font-size: 3.7333vw;
                                color: #666;
                                text-align: center;
                                line-height: 5.3333vw;
                            }
                        }
                    }
                }
            }
        }


        .tabbar {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 13.6vw;
            background-color: #f9f9f9;
            ul {
                display: flex;
                justify-content: space-evenly;
                align-items: center;
                padding: 0 4vw 0 2.6667vw;
                height: 100%;
                li {
                    text-align: center;
                    img {
                        width: 5.8667vw;
                        height: 7.2vw;
                    }
                    .icon {
                        font-size: 7.3333vw;
                        &.active {
                            color: #884E22;
                        }
                    }
                    p {
                        font-size: 3.2vw;
                        font-weight: 400;
                        color: #333;
                        &.index {
                            color: #000;
                        }
                        &.active {
                            color: #884E22;
                        }
                    }
                }
            }
        }
    }
}